<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<header></header>
	<div class="fixed"></div>
	<div class="banner">
				<!--轮播-->
				<div id="banner_box">
					<ul id="imgs">
						<li><a href="#"><img src="/images/m6.png"></a></li>
						<li><a href="#"><img src="/images/m1.png"></a></li>
						<li><a href="#"><img src="/images/m2.png"></a></li>
						<li><a href="#"><img src="/images/m3.png"></a></li>
						<li><a href="#"><img src="/images/m4.png"></a></li>
						<li><a href="#"><img src="/images/m5.png"></a></li>
						<li><a href="#"><img src="/images/m6.png"></a></li>
						<li><a href="#"><img src="/images/m1.png"></a></li>
					</ul>
					<div id="pages">
						<i class="current"></i>
						<i></i>
						<i></i>
						<i></i>
						<i></i>
						<i></i>
					</div>
					<div id="prev">&lt;</div>
					<div id="next">&gt;</div>
					<script src="js/tools.js"></script>
					<script>
						var lis=$("li"),
							length=lis.length,
							ul=$("#imgs"),
							currentIndex=1,
							nextIndex=2,
							circles=$("i"),
							isRunning=false;
							var move = function() {
							var _left = -1 * nextIndex *1349;
							animate(ul, {left: _left}, 200, function(){
								if (nextIndex >= length) { // 向左
									currentIndex = 1;
									nextIndex = 2;
									ul.style.left = "-1349px";
								} else if (currentIndex <=  0) { // 向右
									currentIndex = length - 2;
									nextIndex = length - 1;
									ul.style.left = -1 * (length - 2) *1349 + "px";
								}
								isRunning = false;
							});
							var redIndex = nextIndex - 1;
							if (redIndex >= length - 2)
								redIndex = 0;
							else if(redIndex < 0)
								redIndex = length - 3;
							for(var i = 0; i < length - 2; i++) {
								circles[i].className = "";
							}
							circles[redIndex].className = "current";
							currentIndex = nextIndex;
							nextIndex++;
						}
						var timer = setInterval(move, 1000);
						$("#banner_box").onmouseenter = function() {
							clearInterval(timer);
						}
						$("#banner_box").onmouseleave = function() {
							timer = setInterval(move, 1000);
						}
						$("#pages").onclick = function(e) {
							var src = e.target;
							if (src.nodeName === "I") {
								if (!isRunning) {
									var index = Array.from(circles).indexOf(src);
									nextIndex = index + 1;
									move();
									isRunning = true;
								}
							}
						}
						$("#prev").onclick = function() {
							if (!isRunning) {
								nextIndex = currentIndex - 1;
								move();
								isRunning = true;
							}
						}
						$("#next").onclick = function() {
							if (!isRunning) {
								move();
								isRunning = true;
							}
						}

						$("#banner_box").onselectstart = function(e){
							e.preventDefault();
						}	
					</script>
					<div class="nav">
						<ul class="typeList">
							<li class="li1"><a href="">yuki原创</a>
								<ul class="listul1">
									<li><img src="images/shouji.jpg"><span>服装</span></li>
									<li><img src="images/shouji.jpg"><span>香水</span></li>
									<li><img src="images/shouji.jpg"><span>日用百货</span></li>
									<li><img src="images/shouji.jpg"><span>文具用品</span></li>
								</ul>
							</li>
							<li class="li2"><a href="">美妆个护</a>
								<ul class="listul2">
									<li><img src="images/shouji.jpg"><span>面膜面霜</span></li>
									<li><img src="images/shouji.jpg"><span>驱蚊止痒</span></li>
									<li><img src="images/shouji.jpg"><span>卸妆</span></li>
									<li><img src="images/shouji.jpg"><span>防晒隔离</span></li>
									<li><img src="images/shouji.jpg"><span>眼膜眼霜</span></li>
									<li><img src="images/shouji.jpg"><span>腮红眼影</span></li>
								</ul>
								<ul class="listul3 listul2">
										<li><img src="images/shouji.jpg"><span>口红唇膏</span></li>
										<li><img src="images/shouji.jpg"><span>身体护理</span></li>
										<li><img src="images/shouji.jpg"><span>止汗消臭</span></li>
										<li><img src="images/shouji.jpg"><span>水乳精华</span></li>
										<li><img src="images/shouji.jpg"><span>粉底BB霜</span></li>
										<li><img src="images/shouji.jpg"><span>眼线眉笔睫毛</span></li>
								</ul>
								<ul class="listul4 listul2">
										<li><img src="images/shouji.jpg"><span>更多</span></li>
										
								</ul>
							</li>
							<li class="li3"><a href="">洗护纸品</a>
								<ul class="listul5">
										<li><img src="images/shouji.jpg"><span>洁面</span></li>
										<li><img src="images/shouji.jpg"><span>口罩</span></li>
										<li><img src="images/shouji.jpg"><span>洗发护发</span></li>
										<li><img src="images/shouji.jpg"><span>洗眼护眼</span></li>
										<li><img src="images/shouji.jpg"><span>口腔护理</span></li>
										<li><img src="images/shouji.jpg"><span>纸巾湿巾</span></li>
								</ul>
								<ul class="listul6 listul5">
										<li><img src="images/shouji.jpg"><span>洗手液</span></li>
										<li><img src="images/shouji.jpg"><span>手足护理</span></li>
										<li><img src="images/shouji.jpg"><span>洗浴用品</span></li>
										<li><img src="images/shouji.jpg"><span>女性护理</span></li>
								</ul>
							</li>
							<li class="li4"><a href="">居家生活</a>
								<ul class="listul7">
										<li><img src="images/shouji.jpg"><span>笔</span></li>
										<li><img src="images/shouji.jpg"><span>水杯</span></li>
										<li><img src="images/shouji.jpg"><span>暖手宝</span></li>
										<li><img src="images/shouji.jpg"><span>雨伞雨具</span></li>
										<li><img src="images/shouji.jpg"><span>剃须刀</span></li>
										<li><img src="images/shouji.jpg"><span>净化器</span></li>
								</ul>
								<ul class="listul8 listul7">
										<li><img src="images/shouji.jpg"><span>杂货</span></li>
										<li><img src="images/shouji.jpg"><span>理发剪</span></li>
										<li><img src="images/shouji.jpg"><span>吹风机</span></li>
										<li><img src="images/shouji.jpg"><span>发棒</span></li>
										<li><img src="images/shouji.jpg"><span>便当盒</span></li>
										<li><img src="images/shouji.jpg"><span>电饭煲</span></li>
								</ul>
								<ul class="listul9 listul7">
										<li><img src="images/shouji.jpg"><span>电水壶</span></li>
										<li><img src="images/shouji.jpg"><span>插座</span></li>
										<li><img src="images/shouji.jpg"><span>压力锅</span></li>
										<li><img src="images/shouji.jpg"><span>牙刷</span></li>
										<li><img src="images/shouji.jpg"><span>毛球修剪器</span></li>
										<li><img src="images/shouji.jpg"><span>打蛋器</span></li>
								</ul>
							</li>
							<li class="li5"><a href="">3C数码</a>
								<ul class="listul10">
										<li><img src="images/shouji.jpg"><span>手机图</span></li>
										<li><img src="images/shouji.jpg"><span>移动电源</span></li>
								</ul>
							</li>
							<li class="li6"><a href="">服饰箱包</a>
								<ul class="listul11">
										<li><img src="images/shouji.jpg"><span>T恤</span></li>
										<li><img src="images/shouji.jpg"><span>打底</span></li>
										<li><img src="images/shouji.jpg"><span>防晒</span></li>
										<li><img src="images/shouji.jpg"><span>袜子</span></li>
										<li><img src="images/shouji.jpg"><span>行李箱</span></li>
										<li><img src="images/shouji.jpg"><span>单肩/背包</span></li>
								</ul>
							</li>
							<li class="li7"><a href="">影漫周边</a>
								<ul class="listul12">
										<li><img src="images/shouji.jpg"><span>T恤</span></li>
										<li><img src="images/shouji.jpg"><span>打底</span></li>
										<li><img src="images/shouji.jpg"><span>防晒</span></li>
										<li><img src="images/shouji.jpg"><span>袜子</span></li>
										<li><img src="images/shouji.jpg"><span>行李箱</span></li>
										<li><img src="images/shouji.jpg"><span>单肩/背包</span></li>
								</ul>
							</li>
						</ul>
			</div>
		</div>	
	</div>
	<div class="container">
		<div class="box1" >	
				<script type="text/html" id="template_container">
				<h3>热卖推荐</h3>
				{{each list_shop curr index}}
						<a href="#"><dl>
							<dt><img src="{{curr.img_url}}" alt=""></dt>
							<dd>
								<p>{{curr.desc}}</p>
								<span>￥{{curr.price}}</span>
							</dd>
						</dl></a>
						{{/each}}
						</script>	
		</div>
		<div class="box2">
			<div class="box2_top">
				<h3>美妆个护</h3>
				<ul>
					<li><a href="#">面膜面霜</a><span>|</span></li>
					<li><a href="#">驱蚊止痒</a><span>|</span></li>
					<li><a href="#">卸妆</a><span>|</span></li>
					<li><a href="#">防晒隔离</a><span>|</span></li>
					<li><a href="#">眼膜眼霜</a><span>|</span></li>
					<li><a href="#">腮红眼影</a></li>
				</ul>
				<p><a href="#">更多 ></a></p>
			</div>
			<div class="box2_bottom"></div>					
					
					<script type="text/html" id="template_shopping">
					<ul class="shop_show">
						<li class="first_shop"></li>
					{{each shopping curr index}}	
						
						<li class="s1"><a href="#">
							<img src="{{curr.img_url}}" alt="">
							<p>{{curr.desc}}</p>
							<span>￥{{curr.price}}</span>
						</a></li>
					{{/each}}	
					</ul>
				
				
				</script>
			
		</div>
		<div class="box3">
				<div class="box3_top">
					<h3>洗护纸品</h3>
					<ul>
						<li><a href="#">面膜面霜</a><span>|</span></li>
						<li><a href="#">驱蚊止痒</a><span>|</span></li>
						<li><a href="#">卸妆</a><span>|</span></li>
						<li><a href="#">防晒隔离</a><span>|</span></li>
						<li><a href="#">眼膜眼霜</a><span>|</span></li>
						<li><a href="#">腮红眼影</a></li>
					</ul>
					<p><a href="#">更多 ></a></p>
				</div>
				<div class="box3_bottom"></div>					
						
						<script type="text/html" id="template3_shopping">
						<ul class="shop3_show">
							<li class="first_shop"></li>
						{{each shopping curr index}}	
							
							<li class="s1"><a href="#">
								<img src="{{curr.img_url}}" alt="">
								<p>{{curr.desc}}</p>
								<span>￥{{curr.price}}</span>
							</a></li>
						{{/each}}	
						</ul>
					
					
					</script>
				
			</div>
			<div class="box4">
					<div class="box4_top">
						<h3>居家生活</h3>
						<ul>
							<li><a href="#">面膜面霜</a><span>|</span></li>
							<li><a href="#">驱蚊止痒</a><span>|</span></li>
							<li><a href="#">卸妆</a><span>|</span></li>
							<li><a href="#">防晒隔离</a><span>|</span></li>
							<li><a href="#">眼膜眼霜</a><span>|</span></li>
							<li><a href="#">腮红眼影</a></li>
						</ul>
						<p><a href="#">更多 ></a></p>
					</div>
					<div class="box4_bottom"></div>					
							
							<script type="text/html" id="template4_shopping">
							<ul class="shop4_show">
								<li class="first_shop"></li>
							{{each shopping curr index}}	
								
								<li class="s1"><a href="#">
									<img src="{{curr.img_url}}" alt="">
									<p>{{curr.desc}}</p>
									<span>￥{{curr.price}}</span>
								</a></li>
							{{/each}}	
							</ul>
						
						
						</script>
					
				</div>
				<div class="box5">
						<div class="box5_top">
							<h3>3C数码</h3>
							<ul>
								<li><a href="#">面膜面霜</a><span>|</span></li>
								<li><a href="#">驱蚊止痒</a><span>|</span></li>
								<li><a href="#">卸妆</a><span>|</span></li>
								<li><a href="#">防晒隔离</a><span>|</span></li>
								<li><a href="#">眼膜眼霜</a><span>|</span></li>
								<li><a href="#">腮红眼影</a></li>
							</ul>
							<p><a href="#">更多 ></a></p>
						</div>
						<div class="box5_bottom"></div>					
								
								<script type="text/html" id="template5_shopping">
								<ul class="shop5_show">
									<li class="first_shop"></li>
								{{each shopping curr index}}	
									
									<li class="s1"><a href="#">
										<img src="{{curr.img_url}}" alt="">
										<p>{{curr.desc}}</p>
										<span>￥{{curr.price}}</span>
									</a></li>
								{{/each}}	
								</ul>
							</script>
					</div>
					<div class="box6">
							<div class="box6_top">
								<h3>服饰箱包</h3>
								<ul>
									<li><a href="#">面膜面霜</a><span>|</span></li>
									<li><a href="#">驱蚊止痒</a><span>|</span></li>
									<li><a href="#">卸妆</a><span>|</span></li>
									<li><a href="#">防晒隔离</a><span>|</span></li>
									<li><a href="#">眼膜眼霜</a><span>|</span></li>
									<li><a href="#">腮红眼影</a></li>
								</ul>
								<p><a href="#">更多 ></a></p>
							</div>
							<div class="box6_bottom"></div>					
									
									<script type="text/html" id="template6_shopping">
									<ul class="shop6_show">
										<li class="first_shop"></li>
									{{each shopping curr index}}	
										
										<li class="s1"><a href="#">
											<img src="{{curr.img_url}}" alt="">
											<p>{{curr.desc}}</p>
											<span>￥{{curr.price}}</span>
										</a></li>
									{{/each}}	
									</ul>
								</script>
						</div>
						<div class="box7">
								<div class="box7_top">
									<h3>影漫周边</h3>
									<ul>
										<li><a href="#">面膜面霜</a><span>|</span></li>
										<li><a href="#">驱蚊止痒</a><span>|</span></li>
										<li><a href="#">卸妆</a><span>|</span></li>
										<li><a href="#">防晒隔离</a><span>|</span></li>
										<li><a href="#">眼膜眼霜</a><span>|</span></li>
										<li><a href="#">腮红眼影</a></li>
									</ul>
									<p><a href="#">更多 ></a></p>
								</div>
								<div class="box7_bottom"></div>					
										
										<script type="text/html" id="template7_shopping">
										<ul class="shop7_show">
											<li class="first_shop"></li>
										{{each shopping curr index}}	
											
											<li class="s1"><a href="#">
												<img src="{{curr.img_url}}" alt="">
												<p>{{curr.desc}}</p>
												<span>￥{{curr.price}}</span>
											</a></li>
										{{/each}}	
										</ul>
									</script>
							</div>
	</div>
	
	<footer></footer>

	
	<script src="/lib/requirejs/require.js" data-main="/js/index.js"></script>
</body>
</html>